<template>
  <div class="FooterMusic">
      <div class="footerLeft" @click="updateDetailShow">
        <img :src="playList[playListIndex].al.picUrl" alt="">
        <div class="name">
          <p>{{ playList[playListIndex].name }}</p>
          <span>横滑切换上下首哦</span>
        </div>
      </div>
    <div class="footerRight">
      <svg
        class="icon liebiao"
        aria-hidden="true"
        @click="play"
        v-if="isbtnShow"
      >
        <use xlink:href="#icon-bofang"></use>
      </svg>
      <svg class="icon liebiao" aria-hidden="true" @click="play" v-else>
        <use xlink:href="#icon-zanting"></use>
      </svg>
      <svg class="icon liebiao" aria-hidden="true">
        <use xlink:href="#icon-24gf-playlist2"></use>
      </svg>
    </div>
    <audio
      ref="audio"
      :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`"
    ></audio>
    <van-popup
      v-model:show="detailShow"
      position="right"
      :style="{ height: '100%', width: '100%' }"
      :overlay="true"
    >
      <music-detail
        :musicList="playList[playListIndex]"
        :play="play"
        :isbtnShow="isbtnShow"
        :addDuration="addDuration"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import MusicDetail from "@/components/MusicDetail.vue";

export default {
  data() {
    return {
      interVal: 0
    }
  },
  computed: {
    ...mapState(["playList", "playListIndex", "isbtnShow", "detailShow"]),
  },
  mounted() {
    console.log(this.$refs);
    this.$store.dispatch("getLyric", this.playList[this.playListIndex].id)
    this.updateTime()
  },
  updated() {
      this.$store.dispatch("getLyric", this.playList[this.playListIndex].id);
      // this.addDuration()
  },
  methods: {
    ...mapMutations([
      "updateIsbtnShow",
      "updateDetailShow",
      "updateCurrentTime",
      "updateDuration"
    ]),
    play() {
      // 判断音乐是否播放
      if(this.$refs.audio.paused) {
        this.$refs.audio.play()
        this.updateIsbtnShow(false);
        // this.updateTime(); //播放就调用函数进行传值
      } else {
        this.$refs.audio.pause();
        this.updateIsbtnShow(true);
        clearInterval(this.interVal); //暂停清除定时器
      }
    },
    addDuration:function(){
      this.updateDuration(this.$refs.audio.duration) // 歌曲时长
    },
    updateTime: function () {
      this.interVal = setInterval(() => {
        this.updateCurrentTime(this.$refs.audio.currentTime);  // 当前已经播放时长
      }, 1000);
    },
  },
  watch: {  // itemmusiclist的点击事件才能自动播放音乐，增加用户体验
    playListIndex: function () {
      //监听如果下标发生了改变，就自动播放音乐
      this.$refs.audio.autoplay = true;
      if (this.$refs.audio.paused) {
        //如果是暂停状态，改变图标
        this.updateIsbtnShow(false);
      }
    },
    playList: function () {
      if (this.isbtnShow) {
        this.$refs.audio.autoplay = true;
        this.updateIsbtnShow(false);
      }
    },
  },
  components: {
    MusicDetail,
  },
}
</script>

<style lang="less" scoped>
.FooterMusic {
  width: 100%;
  // height: 1.4rem;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  border-top: 1px solid #999;
  display: flex;
  padding: 0.2rem;
  justify-content: space-between;
  align-items: center;
  .footerLeft {
    width: 100%;
    height: 100%;
    display: flex;
    // justify-content: space-around;
    img {
      width: .8rem;
      height: .8rem;
      border-radius: 50%;
    }
    .name{
      padding-left: .3rem
    }
    span {
      font-size: .1rem
    }
  }
  .footerRight {
    width: 33%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icon {
      width: 0.6rem;
      height: 0.6rem;
    }
  }
  
}
.van-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10 !important;
    width: 100%;
    height: 100%;
    background: var(rgba(0, 0, 0, .7));
} 
.van-popup {
    position: fixed;
    /* z-index: 2001; */
    max-height: 100%;
    overflow-y: auto;
    z-index: 11 !important;
    background: var(rgba(0, 0, 0, .7));
    transition: var(--van-popup-transition);
    /* -webkit-overflow-scrolling: touch; */
}
</style>